﻿@{
    Style.Require("jQueryUI_Orchard");
    Style.Require("NineSeas.Common");
    Style.Require("NineSeas.Reader");
    Style.Require("NineSeas.Authoring");
    Style.Require("NineSeas.Authoring.Book.Edit");

    Script.Require("jQuery").AtHead();
    Script.Require("jQueryUI");
    Script.Require("NineSeas.Common");
    Script.Require("NineSeas.InplaceMessage");
    Script.Require("NineSeas.Authoring.Book.Edit");
    Script.Require("NineSeas.CommandBar");
    Script.Require("FriendUrl");
    Script.Require("TinyMce");       
}
<div id="nineseas">
    <div id="nineseas-reader-header">
        <div class="header-bullet"></div>
        <h1>@Model.Book.Name -
            @{ 
                if (!Model.IsNew) 
                { 
                    <span>@T("Edit chapter") </span>
                } else {
                    <span>@T("Create new chapter")</span>
                }
            }
        </h1>
        @if (!Model.IsNew) {
        <div class="part-right">
            @Display(New.Book_ChapterDropDown(
                Book: Model.Book,
                Chapters: Model.Chapters, 
                SelectedChapter: Model.Chapter, 
                CreateLink: Url.Action("Create", "Chapter", new { bookId = Model.Book.Id}),
                IsEdit: true
            ))
        </div>
        }
    </div>
    <div id="nineseas-reader-content">
        <div id="edit-area" style="width: 600px; margin: 0 auto;">    
            <div class="nineseas-field-label">@T("Title") @Display(New.Controls_HelpPopup(Width: 300, Message: T("Enter the name for your chapter. This value is used to identify a chapter in the Table of Content. If you leave it blank, the auto-generated value 'Chapter &lt;number&gt;' will be used.")))</div>
            <div class="nineseas-field-input">
                <input type="text" id="txtTitle" name="Title" value="@Model.Chapter.Title"/>
            </div>       
            <div class="nineseas-field-label">@T("Content")</div>
            <div class="nineseas-field-input" id="editor-container">
                @Html.TextArea("txtContent", (string)Model.Chapter.Content, 25, 80,
	                     new Dictionary<string,object> {
		                    {"class", "html tinymce"},
                            {"style", "width:100%"}
	                     })
            </div>
            <div id="throbber">
                <div class="curtain"></div>
                <div class="curtain-content">
                    <div>
                        <h1>@T("Processing ...")</h1>
                        <p>
                            <img src="@Href("~/Modules/NineSeas/images/synchronizing.gif")" alt="" />
                        </p>
                    </div>
                </div>
            </div>
        </div> 
    </div>
    <div id="nineseas-reader-footer"></div>
    <script type="text/javascript">
        $(document).ready(function () {
            var updateEditorHeight = function() {
                var newHeight = $('#nineseas-reader-content').height() - 130;
                if (newHeight < 300) newHeight = 300;

                if ($('#txtContent_ifr').length > 0) {
                    $('#txtContent_ifr').height(newHeight);
                } else {
                    $('#txtContent').height(newHeight + 20);
                }
            };

            updateEditorHeight();

            $('#nineseas-reader-content').bind("heightChanged", updateEditorHeight);   
            
            var isNew = @(Model.IsNew.ToString().ToLower());

            var createAction = "@(Url.Action("Create", "Chapter", new { bookId = Model.Book.Id}))";
            var editAction = "@(Url.Action("Edit", "Chapter", new { id = Model.Id}))";  
            
            var bookDetailsButton = {
                id: 'bookDetailsButton',
                caption: '&lt;&lt; @T("Back to book details")',
            type: 'a',
            href: '@Url.Action("Edit", "Books", new {Model.Book.Id})'
            };

            var chaptersButton = {    
                id: 'chaptersButton',
                caption: '&lt; @T("To ToC")',
                onClick: function () {
                    window.location.href = '@(Url.Action("Index", "Chapter", new { bookId = Model.Book.Id}))';
                }
            };    
            var previousButton = {    
                id: 'previousButton',
                caption: '&lt; @T("Previous")',
                isEnabled: '@Model.PreviousUrl'.length > 0,
                onClick: function () {
                    window.location.href = '@Model.PreviousUrl';
                }
            };
            
            var nextButton = {    
                id: 'nextButton',
                caption: '@T("To Next Chapter") &gt;',
                isEnabled: !isNew,
                onClick: function () {
                    window.location.href = '@Model.NextUrl';
                }
            };

            var saveButton = {
                id: 'saveButton',
                caption: '@T("Save")',
                onClick: function () {
                    // collect the form data
                    var data = {
                        title: $("#txtTitle").val(),
                        content: tinyMCE.activeEditor.getContent(),
                        '__RequestVerificationToken': "@Html.AntiForgeryTokenValueOrchard()"
                    };

                    $('#throbber').show();                
                    $.post(isNew ? createAction : editAction, data, function (result) {
                        $('#throbber').hide();
                        if (result.success) {
                            if (isNew) {
                                $('#nextButton').attr("class", "nineseas-button");

                                isNew = false;
                                    
                                var el = $('#nineseas-reader-footer')
                                        .find("#nextButton")
                                        .addClass('nineseas-button')
                                        .removeClass('nineseas-button-disabled')
                                        .bind('click', chaptersButton.onClick);
                            }

                            alert("@T("Saved successfully!")");
                        } else {
                            alert("@T("An error has occurred while trying to save the data!")");
                        }
                    })
                    .always(function () {$('#throbber').hide();});
                }
            };              
                        
            $.commandBar('#nineseas-reader-footer', {
                left: [
                    bookDetailsButton, chaptersButton, previousButton
                ],
                right: [saveButton, nextButton]
            });
        });
    </script>
</div>